<template>
  <Panel title="工单" width="380px">
    <div class="info">12/50</div>
    <div class="item-box">
      <div class="list-item">
        <div class="prefix"><Icon name="inspection" :size="20" :color="'#FF0000'"></Icon></div>
        <Progress :percentage="71" :color="'#2F80ED'">
          <template v-slot:title>
            <div class="title">
              机房巡检
              <span class="subtitle">08:00~进行中</span>
            </div>
          </template>
        </Progress>
      </div>
    </div>
    <div class="item-box">
      <div class="list-item">
        <div class="prefix"><Icon name="maintenance" :size="20" :color="'#29EC78'"></Icon></div>
        <Progress :percentage="100" :color="'#29EC78'">
          <template v-slot:title>
            <div class="title">
              机房巡检
              <span class="subtitle">08:00~进行中</span>
            </div>
          </template>
        </Progress>
      </div>
    </div>
    <div class="item-box">
      <div class="list-item">
        <div class="prefix"><Icon name="repair" :size="20" :color="'#FE8D3B'"></Icon></div>
        <Progress :percentage="49" :color="'#FE8D3B'">
          <template v-slot:title>
            <div class="title">
              机房巡检
              <span class="subtitle">08:00~进行中</span>
            </div>
          </template>
        </Progress>
      </div>
    </div>
  </Panel>
</template>

<script lang="ts" setup></script>
<style lang="scss" scoped>
.info {
  font-size: 20px;
  text-align: right;
  color: #fff;
}

.item-box {
  display: flex;
  border: 2px solid #ffffff0d;
  padding: 2px;
  width: 100%;
  margin: 8px 0px;
}
.list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #ffffff0d;
  width: 100%;
  .prefix {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
  }
  .title {
    color: #c4c4c4;
    font-size: 14px;
    .subtitle {
      color: #fff;
      font-size: 12px;
    }
  }
}
</style>
